<template>
    <div class="shou">
        <ChaView2>
            <h4>我的订单</h4>
        </ChaView2><br><br><br>
            <div class="ddd" v-for="item,index in list" :key="index">
                <div class="left">
                    <img :src="imgUrl+item.ImgUrl" alt="">
                </div>
                <div class="rig">
                    <p class="op">{{item.Name}}&nbsp;&nbsp;{{item.ticketArray.length}}张</p><br>
                    <span>{{item.ReleaseTime}}</span><br><br>
                    <span>{{item.Room}}</span> <span v-for="ccc,index in item.ticketArray" :key="index">{{ccc.Row}}排{{ccc.Col}}座 </span>
                </div>
                <div class="top">
                    <p>总价: {{item.Price*item.ticketArray.length}}元</p> <span>已完成</span>
                </div>
                </div>
        <DiCha></DiCha>
        <router-view/>
    </div>
</template>

<script>
import ChaView2 from '../components/ChaView2.vue'
import DiCha from '../components/DiCha.vue'
export default {
    components: {
        ChaView2,
        DiCha
    },
    data() {
        return {
            list: [],
            arr:[]
        };
    },
    methods: {

    },
    mounted() {
        this.axios.get('/Orders', {params: {
            username: localStorage.username,
            tokenID: localStorage.tokenID}
        }).then(res => {
            console.log(res);
            this.list = res.data.ordersList
            this.arr = res.data.ordersList.ticketArray
        })
    }
};
</script>

<style lang="scss">

.top{
    height: 4vh;
    display: flex;
    border-top: 1px solid #cec9c9;
    text-indent: 10px;
    line-height: 4vh;
    font-size: 14px;
    p{
        flex: 1;
    }
    span{
        display: inline-block;
        flex: 1;
        text-align: right;
        margin-right: 10px;
    }
}
.left{
    float: left;
    width: 24vw;
    height: 13vh;
    img{
        padding-left: 10px;
        padding-top: 10px;
        height: 105px;
        width: 80px;
    }
}
.rig{
    padding-top: 10px;
    height: 13vh;
    .op{
    font-size: 16px;
    font-weight: 600;
    }
}
.ddd{
    width: 100vw;
    margin-top: 5px;
    height: 18vh;
    background-color: #ffff;
}
.shou{
    width: 100vw;
    height: 100vh;
    background-color: #F3F3F3;
}
.tou{
    color: #076FA2;
    height: 4vh;
    width: 100%;
    background-color: white;
    text-align: center;
    font-weight: 600;
    line-height: 4vh;
}
</style>
